<template>
  <!-- 使用 Vant 的导航栏组件 -->
  <van-nav-bar title="待办事项" />
  <!-- 使用 Vant 的输入框组件 -->
  <van-field
    v-model="name"
    placeholder="请填写任务"
    @keydown.enter="enterName"
    clearable
    class="new-todo"
  />
</template>

<script>
export default {
  data() {
    return {
      name: '',
    };
  },
  methods: {
    enterName() {
      this.$emit('addTodo', this.name);
      this.name = '';
    },
  },
};
</script>

<style scoped>
/* 可以根据需要调整 Vant 组件的样式 */
.new-todo {
  padding: 20px;
  border-top: 2px solid #ededed;
}
</style>